<template>
<div class = "addlabor-box">
    <div class = "header-box">
        <span>{{tableName}}</span>
        <el-button @click = "getStaffBtnClick">
            获取未添加人员数据&nbsp;
            <i class="fa fa-download" aria-hidden="true"></i>
        </el-button>
        <el-button @click = "uploadTableData">
            上传所有&nbsp;
            <i class="fa fa-upload" aria-hidden="true"></i>
        </el-button>
<!--        <button @click = "getTableData">获取数据</button>-->
    </div>

    <div class = "center-box">
        <div class = "table-box">
            <div class = "row-box" v-loading="loading">
                <i    class = "x1">&nbsp;</i>
                <span class = "x2">工号</span>
                <span class = "x2">姓名</span>
                <span class = "x3">证书id</span>
                <span class = "x3">初次发证日期</span>
                <span class = "x3">应复审日期</span>
                <span class = "x3">有效期结束时间</span>
<!--                <span class = "x3">是否检查</span>-->
<!--                <span class = "x3">是否已更换</span>-->
                <span class = "x2">状态</span>
                <span class = "x">操作</span>
            </div>
            <div class = "row-box" v-for="(item,i) in tableData">
                <i     class = "x1" >{{ i + 1 }}</i>
                <span  class = "x2" >{{ item.peopleNum }}</span>
                <span  class = "x2" >{{ item.peopleName }}</span>
                <input class = "x3" type="text" v-model="item.cardId">
                <input class = "x3" type="date" v-model="item.firstExamTime">
                <input class = "x3" type="date" v-model="item.validityDate">
                <input class = "x3" type="date" v-model="item.nextExamTime">
<!--                <input class = "x3" type="checkbox" v-model="item.isReview">-->
<!--                <input class = "x3" type="checkbox" v-model="item.isReplacecard">-->
                <span  class = "x2" >{{item.state}}</span>
                <a  class = "x" style = "color: #0076F6;cursor: pointer;text-decoration:underline;;" @click = "uploadATableData(item)">
                    上传&nbsp; <i class="fa fa-upload" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
    <div>
    </div>
</div>
</template>

<script setup>
import {computed, onMounted, reactive, watch} from "vue";
import {insertS, selectIsInfo} from "../../api";
import {debounce} from "lodash";
import { useRoute } from 'vue-router'
import {useStore} from "vuex";
const route = useRoute()
const store = useStore()


//账号信息
let staffInfo = computed(()=>{return store.state.staffInfo;});



//所有的表格
let allTablesList = computed(()=>{return store.state.allTablesList;});



/*修改之前*/
// let tableId = computed(()=>{
//     return store.state.tableId;
// });
/*修改之后*/
let tableId = computed(()=>{return route.query.tableId})



//表格的中文名
let tableName = computed(()=>{
    let res = ""
    store.state.allTablesList.forEach((item)=>{if(item.tableNum === route.query.tableId){res =  item.tableName}})
    return res;
});



/**
 * 监视器
 */
watch(()=>tableId.value,(newvalue,oldvalue)=>{
    if(newvalue === undefined){
       return
    }else {
        getStaffBtnClick()
    }

})

/**
 * 获取数据(目前没用，目前只开发获取没有添加人的信息)
 */
// function getTableData(){
//     let data = {
//         classNum: staffInfo.value.userNum,
//         centerId: staffInfo.value.centerId,
//         jurisdiction: staffInfo.value.jurisdiction
//     }
//     selectSpecialDY(data).then((res) => {
//         if(res.code === 200){
//             // console.log(res);
//         }else{
//             // console.log(res);
//         }
//     },(error)=>{
//         console.log(error);
//     });
// }



onMounted(()=>{
    getStaffBtnClick()
})

let loading = computed(()=>{return store.state.loading;});
let peopleInfoList = reactive([]);
let tableData = reactive([]);
let getStaffBtnClick = debounce(()=>{
    let data = {
        tableName: tableId.value,
        classNum: staffInfo.value.userNum
    }
    console.log({data})
    //是工班必须传工班否则会查询到所有的
    if(staffInfo.value.jurisdiction === 1){
        data.classNum = staffInfo.value.userNum;
    }
    console.log(data,"-------");
    selectIsInfo(data).then((res) => {
        if(res.code === 200){
            peopleInfoList.length = 0;
            peopleInfoList.push(...res.peopleList);
            tableData.length = 0;
            res.peopleList.forEach((item)=>{
                tableData.push({
                    peopleNum:item.peopleNum,
                    peopleName:item.peopleName,
                    cardId: "",
                    firstExamTime: "",
                    validityDate: "",
                    nextExamTime: "",
                    isReview: false,
                    isReplacecard:false,
                    state:'待上传',
                })
            });
        }else{
            console.log(res);
        }
    },(error)=>{
        console.log(error);
    });

},500);



/*更新数据*/
/**
 * 更新一条数据
 * @param item    添加人信息
 */
function uploadATableData(item){
    let data = {
        tableName:tableId.value,
        formData:item
    }
    insertS(data).then((res) => {
        if(res.code === 200){
            console.log(res);
            item.state = "上传成功";
            ElNotification({
                title: 'OK!',
                message: '添加成功',
                duration: 1000,
                position: 'bottom-right',
                type: 'success',
            });
        }else if(res.code === 402){
            console.log(res);
            item.state = "已经上传";
        }
    },(error)=>{
        console.log(error);
    });
}
/**
 * 全部更新
 */
function uploadTableData(){
    for (let i = 0; i < tableData.length; i++) {
        let item = tableData[i];
        let data = {
            tableName:tableId.value,
            formData:item
        }
        insertS(data).then((res) => {
            if(res.code === 200){
                tableData[i].state = "上传成功";
            }else if(res.code === 402){
                tableData[i].state = "已经上传";
            }
        },(error)=>{
            console.log(error);
        });
    }
}
</script>

<style scoped lang="scss">
.addlabor-box{
    padding: 10px;
    .header-box{
        padding-bottom: 10px;
        display: flex;
        &>*{
            margin-right: 5px;
        }
    }
    .center-box{
        padding-top: 0;
        height: calc(100vh - 100px);
        width: 100%;

        .table-box{
            background-color: #FFFFFF;
            width: 100%;
            overflow: auto;
            .row-box{
                width: 100%;
                display: inline-block;
                //background: #FFFFFF;
                display: flex;
                flex-wrap: nowrap;
                &>*{
                    width: 100%;
                    box-sizing: border-box;
                    text-align: center;
                    line-height: 30px;
                    height: 30px;
                    border-right: 1px #EBEEF5 solid;
                    border-bottom: 1px #EBEEF5 solid;
                    //min-width: 150px;
                    //width: 150px;
                    color: #606266;
                    //border: 1px #333 solid;
                    background: #FFFFFF;
                }
                input{

                    border:none;
                    border-right: 1px #EBEEF5 solid;
                    border-bottom: 1px #EBEEF5 solid;
                }
                .x{
                    min-width: 150px;
                }
                .x1{
                    width: 50px;
                    min-width: 50px;
                }
                .x2{
                    width: 100px;
                    min-width: 100px;
                }
                .x3{
                    width: 150px;
                    min-width: 150px;
                }
                .x4{
                    width: 200px;
                    min-width: 200px;
                }
            }
            .header{
                &>* {
                    color: #909399;
                }
            }
            //&>div:nth-child(2n+1){
            //    background: #fff;
            //}
        }

    }
    input{
        box-sizing: border-box;
        vertical-align: top;
        border-radius: 0;
        border:1px #333 solid;
        padding: 3px;
        outline:none;
        background: rgba(255, 255, 255, 0.37);
    }
    input:focus{
        border:1px #66f solid;
    }
    textarea{
        box-sizing: border-box;
        vertical-align: top;
        border-radius: 0;
        border:1px #333 solid;
        padding: 3px;
        outline:none;
        margin: 0;
    }
    textarea:focus{
        border:1px #66f solid;
    }
}

</style>
